<template>
  <div class="login-container">
    <!-- 左侧系统介绍 -->
    <div class="system-intro">
      <div class="intro-content">
        <h1>高校教师学术成果信息综合管理系统</h1>
        <p>欢迎访问本系统，这是一个专为高等院校教师设计的学术成果信息化管理平台。</p>
        <p>本系统提供以下核心功能模块：</p>
        <ul>
          <li>学术成果的录入、分类与量化分析</li>
          <li>教学工作量的数据采集与可视化展示</li>
          <li>研究生培养过程的全周期追踪</li>
          <li>成果审核的规范化流程与质量管控</li>
          <li>个人学术档案的数字化构建与维护</li>
        </ul>
        <div class="intro-footer">
          <p>赋能教师学术发展，助力科研管理现代化</p>
        </div>
      </div>
    </div>
    
    <!-- 右侧登录框 -->
    <div class="login-box">
      <div class="login-content">
      <div class="login-header">
        <div class="logo">
          <i class="el-icon-school"></i>
        </div>
          <h2>系统登录</h2>
      </div>
      <el-form
        ref="formRef"
        :model="loginForm"
        :rules="rules"
        class="login-form"
        label-width="0"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
              placeholder="账号"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%">
              <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
            </div>
          </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            class="login-button"
            @click="handleLogin"
            round
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="login-footer">
          <p>© {{ new Date().getFullYear() }} 学术成果管理平台</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { useAuthStore } from '../store/auth'
import { User, Lock } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'Login',
  setup() {
    const router = useRouter()
    const formRef = ref<FormInstance>()
    const loading = ref(false)
    const authStore = useAuthStore()
    
    const loginForm = reactive({
      username: '',
      password: '',
      rememberMe: false
    })
    
    const rules = reactive<FormRules>({
      username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 20, message: '账号长度在3到20个字符之间', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
      ]
    })
    
    // 根据之前的登录状态填充表单
    const initForm = () => {
      const savedUsername = localStorage.getItem('savedUsername')
      if (savedUsername) {
        loginForm.username = savedUsername
        loginForm.rememberMe = true
      }
    }
    
    // 处理键盘Enter事件进行登录
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Enter') {
        handleLogin()
      }
    }
    
    // 登录提交
    const handleLogin = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        loading.value = true
        
        // 记住用户名
        if (loginForm.rememberMe) {
          localStorage.setItem('savedUsername', loginForm.username)
        } else {
          localStorage.removeItem('savedUsername')
        }
        
        // 登录请求
        const userData = await authStore.login(
          loginForm.username,
          loginForm.password,
          loginForm.rememberMe
        )
        
        if (userData) {
          // 获取重定向路径
          const redirectPath = router.currentRoute.value.query.redirect as string || ''
              
          // 根据用户角色跳转到不同页面
          const userRole = authStore.userRole
          if (redirectPath) {
            router.push(redirectPath)
          } else if (userRole === 'ADMIN') {
            router.push('/admin/dashboard')
          } else if (userRole === 'TEACHER') {
            router.push('/teacher/dashboard')
          } else if (userRole === 'STUDENT') {
            router.push('/student/dashboard')
          } else {
            router.push('/')
          }
        }
      } catch (error: any) {
        console.error('登录失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    // 在页面加载时初始化表单
    onMounted(() => {
      initForm()
      // 添加键盘事件监听
      window.addEventListener('keydown', handleKeyDown)
      
      // 尝试自动登录
      if (!authStore.isAuthenticated) {
        authStore.autoLogin()
      }
    })
    
    // 在组件卸载时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('keydown', handleKeyDown)
    })
    
    return {
      formRef,
      loginForm,
      rules,
      loading,
      handleLogin,
      User,
      Lock
    }
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  overflow: hidden;
  
  .system-intro {
    flex: 1;
    background-color: #f5f5f5;
    color: #333;
    padding: 0 8%;
    display: flex;
    flex-direction: column;
  justify-content: center;
    position: relative;
    
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent);
    }
    
    .intro-content {
      max-width: 600px;
      
      h1 {
        font-size: 36px;
        margin-bottom: 40px;
        font-weight: 300;
        color: #333;
        letter-spacing: 1px;
      }
      
      p {
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 1.8;
        color: #555;
      }
      
      ul {
        margin: 30px 0;
        padding-left: 25px;
        
        li {
          margin-bottom: 15px;
          font-size: 16px;
          color: #555;
  position: relative;
  
  &:before {
    content: '';
    position: absolute;
            left: -25px;
            top: 10px;
            width: 8px;
            height: 8px;
            background-color: #666;
            border-radius: 50%;
          }
        }
      }
      
      .intro-footer {
        margin-top: 50px;
        
        p {
          font-size: 20px;
          font-weight: 300;
          color: #333;
          letter-spacing: 0.5px;
        }
      }
    }
  }
  
  .login-box {
    width: 40%;
    min-width: 450px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .login-content {
      width: 75%;
      max-width: 400px;
    
    .login-header {
        margin-bottom: 40px;
      text-align: center;
      
      .logo {
          margin-bottom: 25px;
        font-size: 48px;
          height: 90px;
          width: 90px;
          line-height: 90px;
        border-radius: 50%;
        color: #fff;
          background: #424242;
          margin: 0 auto 25px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        
        i {
            font-size: 45px;
        }
      }
      
      h2 {
          font-size: 28px;
        color: #333;
        margin: 0;
          font-weight: 300;
          letter-spacing: 1px;
      }
    }
    
    .login-form {
      .el-form-item {
          margin-bottom: 30px;
        
        &:last-child {
            margin-bottom: 20px;
        }
      }
      
      .el-input {
        .el-input__inner {
          padding-left: 45px;
          height: 50px;
          font-size: 16px;
            border-color: #e0e0e0;
            
            &:focus {
              border-color: #424242;
              box-shadow: none;
            }
        }
        
        .el-input__prefix {
          left: 15px;
        }
      }
      
      .login-button {
        width: 100%;
        height: 50px;
        font-size: 16px;
          letter-spacing: 3px;
          background: #424242;
        border: none;
        transition: all 0.3s ease;
        
        &:hover {
            background: #333;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
      }
    }
    
    .login-footer {
        margin-top: 40px;
      text-align: center;
      
      p {
        color: #999;
        font-size: 13px;
      }
    }
  }
}
}

// 适应小屏幕
@media screen and (max-width: 1200px) {
  .login-container {
    .login-box {
      width: 45%;
      min-width: 400px;
      
      .login-content {
        width: 85%;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .login-container {
    flex-direction: column;
    
    .system-intro {
      padding: 40px 5%;
      flex: none;
      height: 50vh;
      overflow-y: auto;
      
      &:after {
        display: none;
      }
      
      .intro-content {
        h1 {
          font-size: 28px;
          margin-bottom: 20px;
  }
        
        ul {
          margin: 15px 0;
        }
        
        .intro-footer {
          margin-top: 20px;
          
          p {
            font-size: 18px;
          }
        }
      }
    }
    
    .login-box {
      width: 100%;
      min-width: unset;
      height: 50vh;
      overflow-y: auto;
      
      .login-content {
        width: 90%;
        max-width: 360px;
        padding: 30px 0;
        
        .login-header {
          margin-bottom: 25px;
          
          .logo {
            height: 70px;
            width: 70px;
            line-height: 70px;
            margin-bottom: 15px;
            
            i {
              font-size: 35px;
            }
          }
          
          h2 {
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style> 